﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>oHover</title>
    <meta name="description" content="oHover effects">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script type="text/javascript" src="static/js/jquery-2.1.1.min.js"></script>
    <script src="static/js/jquery.smooth-scroll.js"></script> 

    <!-- stylesheets-->
    <link href="static/css/0762aa74a5ea49d49ccc38426ecb6b27.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="static/css/ohover.css"/>
    <link rel="stylesheet" type="text/css" href="static/css/main.css"/>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.nav ul a').smoothScroll();
        });
    </script>
</head>
<body>

    <div class="top-header">
      <div class="container">
        <h1>CSS3 hover effects</h1>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="nav">
            <ul>
                <li><a href="#circle1">effect 1</a></li>
                <li><a href="#circle2">effect 2</a></li>
                <li><a href="#circle3">effect 3</a></li>
                <li><a href="#circle4">effect 4</a></li>
                <li><a href="#circle5">effect 5</a></li>
                <li><a href="#circle6">effect 6</a></li>
                <li><a href="#circle7">effect 7</a></li>
                <li><a href="#circle8">effect 8</a></li>
                <li><a href="#circle9">effect 9</a></li>
                <li><a href="#circle10">effect 10</a></li>
                <li><a href="#circle11">effect 11</a></li>
                <li><a href="#circle12">effect 12</a></li>
                <li><a href="#circle13">effect 13</a></li>
                <li><a href="#circle14">effect 14</a></li>
                <li><a href="#circle15">effect 15</a></li>
                <li><a href="#circle16">effect 16</a></li>
                <li><a href="#circle17">effect 17</a></li>
                <li><a href="#circle18">effect 18</a></li>
                <li><a href="#circle19">effect 19</a></li>
                <li><a href="#circle20">effect 20</a></li>
            </ul>

        </div>
        <div class="block_for_effect">

            <h3 id="circle1" class="section-heading">Hover effect 1</h3>
            <div class="example">
                <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect1"><a href="#">
                      <div class="spinner"></div>
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect1"><a href="#">
                      <div class="spinner"></div>
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored -->
                </div>
                </div>
                <div class="row">
                    <div class="row-2">
                        <!-- normal -->
                        <div class="item-hover circle effect1 counterclockwise"><a href="#">
                            <div class="spinner"></div>
                            <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                            <div class="info">
                                <div class="info-back">
                                    <h3>Heading here</h3>
                                    <p>Description goes here</p>
                                </div>
                            </div></a></div>
                        <!-- end normal -->
                    </div>
                    <div class="row-2">
                        <!-- colored -->
                        <div class="item-hover circle colored effect1 counterclockwise"><a href="#">
                            <div class="spinner"></div>
                            <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                            <div class="info">
                                <div class="info-back">
                                    <h3>Heading here</h3>
                                    <p>Description goes here</p>
                                </div>
                            </div></a></div>
                        <!-- end colored -->
                    </div>
                </div>

            </div>


            <br>
            <h3 id="circle2" class="section-heading first-child">Hover effect 2</h3>
            <div class="example">
              <!-- Left to right-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect2 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect2 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Left to right-->
              <!-- Right to left-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect2 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect2 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Right to left-->
              <!-- Top to bottom-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect2 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect2 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f9.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom-->
              <!-- Bottom to top-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect2 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f8.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect2 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top-->
            </div>
            <br>
            <h3 id="circle3" class="section-heading">Hover effect 3</h3>
            <div class="example">
              <!-- Left to right-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect3 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect3 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Left to right-->
              <!-- Right to left-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect3 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect3 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Right to left-->
              <!-- Bottom to top-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect3 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect3 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top-->
              <!-- Top to bottom-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect3 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect3 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom-->
            </div>
            <br>
            <h3 id="circle4" class="section-heading">Hover effect 4</h3>
            <div class="example">
              <!-- Left to right-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect4 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect4 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Left to right-->
              <!-- Right to left-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect4 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect4 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Right to left-->
              <!-- Top to bottom-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect4 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect4 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom-->
              <!-- Bottom to top-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect4 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect4 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top-->
            </div>
            <br>
            <h3 id="circle5" class="section-heading">Hover effect 5</h3>
            <div class="example">
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect5"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect5"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
            </div>
            <br>
            <h3 id="circle6" class="section-heading">Hover effect 6</h3>
            <div class="example">
              <!-- Scale up-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect6 scale_up"><a href="#">
                      <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect6 scale_up"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored-->
                </div>
              </div>
              <!-- end Scale up-->
              <!-- Scale down-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect6 scale_down"><a href="#">
                      <div class="img"><img src="static/picture/f8.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect6 scale_down"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored-->
                </div>
              </div>
              <!-- end Scale down-->
              <!-- Scale down up-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect6 scale_down_up"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect6 scale_down_up"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored-->
                </div>
              </div>
              <!-- end Scale down up-->
            </div>
            <br>
            <h3 id="circle7" class="section-heading">Hover effect 7</h3>
            <div class="example">
              <!-- Left to right-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect7 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect7 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Left to right-->
              <!-- Right to left-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect7 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect7 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Right to left-->
              <!-- Top to bottom-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect7 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect7 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom-->
              <!-- Bottom to top-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect7 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect7 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top-->
            </div>
            <br>
            <h3 id="circle8" class="section-heading">Hover effect 8</h3>
            <div class="example">
              <!-- Left to right-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect8 left_to_right"><a href="#">
                      <div class="img-container">
                        <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      </div>
                      <div class="info-container">
                        <div class="info">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect8 left_to_right"><a href="#">
                      <div class="img-container">
                        <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      </div>
                      <div class="info-container">
                        <div class="info">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Left to right-->
              <!-- Right to left-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect8 right_to_left"><a href="#">
                      <div class="img-container">
                        <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      </div>
                      <div class="info-container">
                        <div class="info">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect8 right_to_left"><a href="#">
                      <div class="img-container">
                        <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      </div>
                      <div class="info-container">
                        <div class="info">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Right to left-->
              <!-- Top to bottom-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect8 top_to_bottom"><a href="#">
                      <div class="img-container">
                        <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      </div>
                      <div class="info-container">
                        <div class="info">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect8 top_to_bottom"><a href="#">
                      <div class="img-container">
                        <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      </div>
                      <div class="info-container">
                        <div class="info">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom-->
              <!-- Bottom to top-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect8 bottom_to_top"><a href="#">
                      <div class="img-container">
                        <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      </div>
                      <div class="info-container">
                        <div class="info">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect8 bottom_to_top"><a href="#">
                      <div class="img-container">
                        <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      </div>
                      <div class="info-container">
                        <div class="info">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top-->
            </div>
            <br>
            <h3 id="circle9" class="section-heading">Hover effect 9</h3>
            <div class="example">
              <!-- Left to right-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect9 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect9 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Left to right-->
              <!-- Right to left-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect9 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect9 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Right to left-->
              <!-- Top to bottom-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect9 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect9 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom-->
              <!-- Bottom to top-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect9 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect9 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top-->
            </div>
            <br>
            <h3 id="circle10" class="section-heading">Hover effect 10</h3>
            <div class="example">
              <!-- Top to bottom-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect10 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect10 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom-->
              <!-- Bottom to top-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect10 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect10 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top-->
            </div>
            <br>
            <h3 id="circle11" class="section-heading">Hover effect 11</h3>
            <div class="example">
              <!-- Left to right-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect11 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect11 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Left to right-->
              <!-- Right to left-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect11 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect11 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Right to left-->
              <!-- Top to bottom-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect11 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect11 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom-->
              <!-- Bottom to top-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect11 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect11 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top-->
            </div>
            <br>
            <h3 id="circle12" class="section-heading">Hover effect 12</h3>
            <div class="example">
              <!-- Left to right-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect12 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect12 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Left to right-->
              <!-- Right to left-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect12 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect12 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Right to left-->
              <!-- Top to bottom-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect12 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect12 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom-->
              <!-- Bottom to top-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect12 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect12 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top-->
            </div>
            <br>
            <h3 id="circle13" class="section-heading">Hover effect 13</h3>
            <div class="example">
              <!-- From left and right -->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect13 from_left_and_right"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect13 from_left_and_right"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end From left and right -->
              <!-- Top to bottom -->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect13 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect13 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom -->
              <!-- Bottom to top -->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect13 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect13 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top -->
            </div>
            <br>
            <h3 id="circle14" class="section-heading">Hover effect 14</h3>
            <div class="example">
              <!-- Left to right-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect14 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect14 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Left to right-->
              <!-- Right to left-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect14 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect14 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Right to left-->
              <!-- Top to bottom-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect14 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect14 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom-->
              <!-- Bottom to top-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect14 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect14 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top-->
            </div>
            <br>
            <h3 id="circle15" class="section-heading">Hover effect 15</h3>
            <div class="example">
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect15 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect15 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
            </div>
            <br>
            <h3 id="circle16" class="section-heading">Hover effect 16</h3>
            <div class="example">
              <!-- Left to right -->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect16 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect16 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Left to right -->
              <!-- Right to left-->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect16 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect16 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored-->
                </div>
              </div>
              <!-- end Right to left -->
            </div>
            <br>
            <h3 id="circle17" class="section-heading">Hover effect 17</h3>
            <div class="example">
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect17"><a href="#">
                      <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect17"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
            </div>
            <br>
            <h3 id="circle18" class="section-heading">Hover effect 18</h3>
            <div class="bs-callout bs-callout-warning">
              <p>Note: This will not work in IE9, since IE9 doesn't support 3d rotate.</p>
            </div>
            <div class="example">
              <!-- Bottom to top -->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect18 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect18 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored-->
                </div>
              </div>
              <!-- end Bottom to top -->
              <!-- Left to right -->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect18 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect18 left_to_right"><a href="#">
                      <div class="img"><img src="static/picture/f7.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored-->
                </div>
              </div>
              <!-- end Left to right -->
              <!-- Right to left  -->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect18 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f6.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect18 right_to_left"><a href="#">
                      <div class="img"><img src="static/picture/f8.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored-->
                </div>
              </div>
              <!-- end Right to left  -->
              <!-- Top to bottom -->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect18 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect18 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored-->
                </div>
              </div>
              <!-- end Top to bottom -->
            </div>
            <br>
            <h3 id="circle19" class="section-heading">Hover effect 19</h3>
            <div class="example">
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect19"><a href="#">
                      <div class="img"><img src="static/picture/f1.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect19"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <h3>Heading here</h3>
                        <p>Description goes here</p>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
            </div>
            <br>
            <h3 id="circle20" class="section-heading">Hover effect 20</h3>
            <div class="example">
              <!-- Top to bottom -->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect20 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f2.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect20 top_to_bottom"><a href="#">
                      <div class="img"><img src="static/picture/f4.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Top to bottom -->
              <!-- Bottom to top -->
              <div class="row">
                <div class="row-2">
                  <!-- normal -->
                  <div class="item-hover circle effect20 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f3.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end normal -->
                </div>
                <div class="row-2">
                  <!-- colored -->
                  <div class="item-hover circle colored effect20 bottom_to_top"><a href="#">
                      <div class="img"><img src="static/picture/f5.jpg" alt="img"></div>
                      <div class="info">
                        <div class="info-back">
                          <h3>Heading here</h3>
                          <p>Description goes here</p>
                        </div>
                      </div></a></div>
                  <!-- end colored -->
                </div>
              </div>
              <!-- end Bottom to top -->
            </div>

        </div>
      </div>
    </div>
    <!-- Footer-->

  </body>
</html>